<template>
	<view class="zone">
		<Header title="开启宝箱" :headertype="0"></Header>
		<view class="main">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="left">
						<image :src="'http://img.cpgm.cc/panda/static/treasurebox/' + item.img" mode="widthFix" />
						<view class="word">
							<p>{{item.name}}</p>
							<p>消耗银元： <text>{{item.sliver}}</text> </p>
							<p>有机率获得水晶和实物奖励</p>
						</view>
					</view>
					<view class="button" @click="openGoldBox(item.id)">开启</view>
				</view >
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						id:1,
						img:'1.png',
						sliver:10,
						name:'青木宝箱'
					},
					{
						id:2,
						img:'2.png',
						sliver:100,
						name:'白银宝箱'
					},
					{
						id:3,
						img:'3.png',
						sliver:1000,
						name:'黄金宝箱'
					},
					{
						id:4,
						img:'4.png',
						sliver:8000,
						name:'铂金宝箱'
					},
					{
						id:5,
						img:'4.png',
						sliver:8000,
						name:'钻石宝箱'
					},
				],
				rewardshow:false,
				num:'',
			};
		},
		methods: {
			// 开启水晶宝箱
			async openGoldBox(type){
				let res = await this.$http.index.openGoldBox({
					type:type
				});
				if(res.code == 1) {
					this.num = res.gold
					this.rewardshow = true
				}else {
					this.$u.toast(res.msg)
				}
			},
		},
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(90deg, #E5FCFA 0%, #FAE1F4 100%);
	min-height: 100vh;
}
.main {
	padding: 10px;
}

.item {
	background: #FFFFFF;
	border-radius: 11px;
	border: 1px solid #FEE1C3;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 8px 0;

	.button {
		width: 73px;
		height: 31px;
		background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
		border-radius: 5px;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}
}

.left {
	display: flex;
	align-items: center;
	image {
		width: 60px;
		margin-right: 10px;
	}
}

.word {
	display: flex;
	flex-direction: column;

	p:nth-child(1) {
		color: #131314;
		font-size: 14px;
		font-weight: 600;
	}
	p:nth-child(3) {
		color: #343434;
		font-size: 12px;
		font-weight: 600;
		margin: 5px 0;
	}
	p:nth-child(2) {
		color: #343434;
		font-size: 12px;
		font-weight: 600;

		text {
			color: #3CB333;
			font-size: 14px;
			font-weight: normal;
		}
	}
}

</style>
